<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="head-container">
          <el-input
            v-model="filterPara.name"
            placeholder="请输入搜索关键字"
            type="primary"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
            @input="handleSearch"
          />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="pull-right">
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refresh">刷新</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">上传</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>

      <el-table v-loading="loading" :data="files.pagedList">
        <el-table-column label="文件编号" align="center" key="id" prop="id"  />
        <el-table-column label="文件名称" align="center" key="name" prop="name"  />
        <el-table-column label="文件大小" align="center" key="size" prop="size"  />
        <el-table-column label="上传时间" align="center" key="createTime" prop="createTime"  />
        <el-table-column
          label="操作"
          align="center"
          width="160"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDel(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="files.pageParams.total>0"
        :total="files.pageParams.total"
        :page.sync="files.pageParams.pageNum"
        :limit.sync="files.pageParams.pageSize"
        @pagination="handlePaging"
      />
    </el-row>

    <!-- 上传文件对话框 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.open" width="600px" append-to-body>
      <el-form ref="uploadForm" :model="dialog.uploadForm" label-width="80px">
        <el-row>
          <el-upload
            ref="upload"
            action=""
            :on-change="handleUploadChange"
            :auto-upload="false"
            :show-file-list="true"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary" >选取文件</el-button>
<!--            <el-button size="small" type="primary" :disabled="!dialog.selected" @click="reselectFile">清空选择</el-button>-->
<!--            <div slot="tip" class="el-upload__tip">不超过500</div>-->
          </el-upload>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleUpload">上传</el-button>
        <el-button @click="dialog.open=false;">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {listFiles,addFile,delFile} from "@/api/manage/file";
  export default {
    name: "file",
    dicts: [],
    data() {
      return {
        loading:true,
        filterPara:{
          name:undefined,
        },
        files:{
          uploadList:[],
          originList:[],
          list:[],
          pagedList:[],
          pageParams:{
            pageNum:1,
            pageSize:10,
            total:undefined,
          },
        },
        dialog:{
          open:false,
          title:"",
          selected:false,
          uploadFiles:[],
          uploadForm:{
            file:null,
            name:null,
          },
          rules:{
            name:[
              // { required: true, message: "名称不能为空", trigger: "blur" },
            ]
          },
        },
      }
    },
    created() {
      this.getFileList();
    },
    watch:{
      filterPara:{
        handler:function() {
          this.handleSearch();
        },
        deep:true,
      }
    },
    methods: {
      refresh(){
        this.getFileList();
        this.$modal.msgSuccess("刷新成功");
      },
      getFileList(){
        this.loading=true;
        listFiles().then(response=>{
          this.files.originList=response.data;
          this.files.pageParams.total=this.files.originList.length;
          this.files.list=response.data;
          this.loading=false;
          this.resetPaging();
        });
      },
      handleAdd(){
        this.dialog.title="新增文件";
        this.dialog.open=true;
      },
      handleSearch(){
        let newList=[];
        this.files.originList.forEach(item=>{
          if(item.name.includes(this.filterPara.name)){
            newList.push(item);
          }
        });
        this.files.list=newList;
        this.resetPaging();
      },
      resetPaging(){
        this.files.pageParams={
          pageNum:1,
          pageSize:10,
          total:undefined,
        };
        this.handlePaging();
      },
      handlePaging(){
        let params=this.files.pageParams;
        this.files.pageParams.total=this.files.list.length;
        this.files.pagedList=this.files.list.slice(
          (params.pageNum-1)*params.pageSize,
          params.pageNum*params.pageSize
        );
      },
      handleUploadChange(file,fileList){
        this.dialog.selected=true;
        if(fileList.length>1){
          fileList.splice(0,1);
        }
        if(fileList.length==1){
          this.dialog.uploadForm.file=fileList[0].raw;
        }else {
          this.dialog.uploadForm.file=fileList[0].raw;
        }
      },
      reselectFile(){

      },
      handleUpload(){
        // this.$refs["uploadForm"].validate(valid=>{
          if(this.dialog.uploadForm.file!=null){
            let formData = new FormData();
            formData.append("file", this.dialog.uploadForm.file);
            addFile(formData).then(response=>{
              this.$modal.msgSuccess("上传成功");
              this.dialog.open = false;
              this.getFileList();
            });
          }
        // });
      },
      handleDel(row){
        this.$modal.confirm('是否确定删除文件："' +row.name + "” ？").then(function() {
          return delFile({
            fileId:row.id,
          });
        }).then(response=>{
          this.$modal.msgSuccess("删除成功");
          this.getFileList();
        }).catch(() => {});
      }
    },
  }
</script>
